<template>
  <div class="step3">
    <div class="title">{{ props.goodsGame?.goods_name }}</div>
    <div class="type-list">
      <div class="type">
        <div class="left">{{ $t("reserve.adults") }}</div>
        <div class="right">
          <span>
            {{ $t("reserve.prePlayer")
            }}<span class="dan">{{
              custom.symbol + formatMoney(props.goodsGame?.goods_price*1)
            }}</span>
          </span>
          <el-input-number v-model="num" :min="1" @change="numChange" />
        </div>
      </div>
      <!-- <div class="type">
        <div class="left">
          Child (13 & under)
          <p>(Must be supervised by an adult)</p>
        </div>
        <div class="right">
          <span>
            {{ $t("reserve.prePlayer")
            }}<span class="dan">{{
              custom.symbol + props.goodsGame?.goods_price
            }}</span>
          </span>
          <el-input-number v-model="num" :min="1" @change="numChange" />
        </div>
      </div>
      <div class="type">
        <div class="left">
          Student
          <p>(must hold valid student ID)</p>
        </div>
        <div class="right">
          <span>
            {{ $t("reserve.prePlayer")
            }}<span class="dan">{{
              custom.symbol + props.goodsGame?.goods_price
            }}</span>
          </span>
          <el-input-number v-model="num" :min="1" @change="numChange" />
        </div>
      </div> -->
    </div>
    <div class="fl-row-but">
      <div class="money">
        {{ $t("reserve.subtotal") }} <span>{{ custom.symbol }}</span
        ><span class="ft-20">{{ formatMoney(admissionTicketPrice.toFixed(2)) }}</span>
      </div>
      <div class="but" @click="prevent">{{ $t("reserve.previous") }}</div>
      <div class="but" @click="next">{{ $t("reserve.next") }}</div>
    </div>
  </div>
</template>
  
  <script setup lang="ts">
import { ref, watch } from "vue";
import { formatMoney } from "@/utils/commen"

const custom = JSON.parse(localStorage.getItem("custom") as any);
const props = defineProps(["goodsGame"]);
const emits = defineEmits(["next", "prevent"]);
const num = ref(1);
const admissionTicketPrice = ref(0);

watch(
  () => props.goodsGame,  // 监听整个对象的变化
  (newValue, oldValue) => {
    admissionTicketPrice.value = num.value*newValue?.goods_price
  },
  { deep: true }  // 深度监听对象的内部变化
);
// 下一步
const next = () => {
 let good_info = [{
    goods_id:props.goodsGame?.goods_id,
    goods_num:num.value
 }]
  emits("next",good_info);
};

// 门票数量改变
const numChange = () => {
  admissionTicketPrice.value = num.value * props.goodsGame?.goods_price;
  console.log(num.value,props.goodsGame?.goods_price,"props.goodsGame?.goods_price");
  
};

const prevent = () => {
  emits("prevent");
};
</script>
  
<style scoped lang="scss">
.step3 {
  padding: 0 10px;
  .title {
    color: #0e2e57;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
  }
  .type-list {
    padding:10px 10px;
    border: 1px solid var(--theme-color);
    border-radius: 5px;
    .type {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        font-size: 14px;
        text-align: left;
        p {
          color: red;
          font-size: 12px;
        }
      }
      .right {
        display: flex;
        align-items: center;
        span {
          display: inline-block;
          width: 80px;
          color: #0e2e57;
          font-size: 12px;
          margin-right: 5px;
        }
      }
    }
  }

  .el-input-number {
    text-align: center;
    width: 100px;
  }

  :deep(.el-input__wrapper) {
    height: 30px;
    background: transparent;
    box-shadow: 0 0 0 1px var(--theme-color) inset;
  }

  :deep(.el-input-number__decrease) {
    width: 30px;
    background: transparent;
    border-right: 1px solid var(--theme-color);
  }

  :deep(.el-input-number__increase) {
    width: 30px;
    background: transparent;
    border-left: 1px solid var(--theme-color);
  }
}
.fl-row-but {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
  margin-top: 30px;
  .money {
    margin-right: 50px;
    font-size: 14px;
    font-weight: 600;

    span {
      color: var(--theme-color);
    }

    .ft-20 {
      font-size: 20px;
    }
    .ft-21 {
      font-size: 14px;
    }
  }
}

.but {
  color: #e2e8fc;
  background: var(--theme-color-btn);
  font-size: 12px;
  width: 30%;
  //margin-left: 45px;
  text-align: center;
  cursor: pointer;
  height: 42px;
  line-height: 42px;
  //margin: 0 0 0 auto;
  font-weight: 600;
}
</style>